<script setup>
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import titleHeader from '@/components/common/titleHeader.vue'
import { rule } from '@/utils/Home/user/userRules'
const route = useRoute()
// const data=JSON.parse(route.query.data)||''
// const queryData=JSON.parse(route.query.data||'')
// console.log(queryData);

let queryData = {}
if (route.query && route.query.data) {
  try {
    queryData = JSON.parse(route.query.data)
  } catch (error) {
    console.error('Error parsing query data:', error)
    // 可以选择记录错误、抛出错误或简单地使用空对象
  }
}

const form = ref({
  // 用户名称
  nickName: queryData.nickName||'',
  // 角色
  role: queryData.role||'',
  // 状态
  status: queryData.status||'',
  //单位
  mond: queryData.mond||'',
  //   备注
  remark: '',
  //   密码
  password: '',
  //   手机号
  phone: '',
  //   性别
  sex: ''
})
const options = [
  {
    label: '启用',
    value: '启用'
  },
  {
    label: '禁用',
    value: '禁用'
  }
]
const optionsSex = [
  {
    label: '男',
    value: '男'
  },
  {
    label: '女',
    value: '女'
  }
]
const formRef = ref(null)
async function handleSave() {
  await formRef.value.validate((valid) => {
    if (!valid) return
    // 成功提交---准备接口
    console.log(form.value)
  })
}

function handleReset() {
  formRef.value.resetFields()
}
</script>

<template>
  <div class="userAdd">
    <titleHeader></titleHeader>
    <div class="userAdd-wrapper">
      <el-form
        :model="form"
        ref="formRef"
        class="form"
        inline
        :label-width="95"
        label-position="left"
        :rules="rule"
      >
        <el-form-item label="用户名称：" prop="nickName">
          <el-input v-model.trim="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="用户密码：" prop="password">
          <el-input v-model.trim="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" prop="phone">
          <el-input v-model.trim="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="用户性别：" prop="sex">
          <el-select v-model.trim="form.sex" placeholder="请选择性别" style="width: 190px">
            <el-option
              v-for="item in optionsSex"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单位：" prop="mond">
          <el-input v-model.trim="form.mond"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model.trim="form.status" placeholder="请选择状态" style="width: 190px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model.trim="form.role"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model.trim="form.remark"
            style="width: 500px"
            :rows="2"
            :autosize="{ minRows: 4, maxRows: 10 }"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <div class="form-bottom">
        <el-button type="primary" style="margin: 10px 25px" @click="handleSave">保存</el-button>
        <el-button type="primary" style="margin: 10px 25px" @click="handleReset">取消</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.userAdd {
  display: flex;
  flex-direction: column;
  .userAdd-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 50px;
    overflow: hidden;
    .form {
      width: 640px;
      text-align: left;
      .form-bottom {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    }
  }
}
</style>
